<template>
	<!-- 仅在显示时渲染 -->
	<view v-if="visible" class="popup-container">
		<!-- 背景遮罩 - 带过渡动画 -->
		<view class="overlay" @click="handleClose" :class="{ 'overlay-enter': animateEnter }"></view>

		<!-- 排行榜弹窗 - 带弹出动画 -->
		<view class="popup" :class="{ 'popup-enter': animateEnter }">
			<!-- 弹窗头部 -->
			<view class="popup-header">
				<text class="header-title">
					<text class="text-gold">🏆</text>
					玩家排行榜
				</text>
				<button class="close-btn" @click="handleClose">
					<text>×</text>
				</button>
			</view>

			<!-- 主选项卡导航 -->
			<view class="main-tabs">
				<view class="tabs-container">
					<button class="main-tab" :class="{ 'tab-active': activeMainTab === 'classic' }"
						@click="switchMainTab('classic')">
						经典盲盒
					</button>
					<button class="main-tab" :class="{ 'tab-active': activeMainTab === 'battle' }"
						@click="switchMainTab('battle')">
						盲盒对战
					</button>
					<button class="main-tab" :class="{ 'tab-active': activeMainTab === 'lucky' }"
						@click="switchMainTab('lucky')">
						幸运饰品
					</button>
				</view>
			</view>

			<!-- 内容区域 -->
			<view class="content-area">
				<!-- 经典盲盒内容 -->
				<view class="main-content" v-if="activeMainTab === 'classic'">
					<!-- 子选项卡导航 -->
					<view class="sub-tabs">
						<button class="sub-tab" :class="{ 'tab-active': activeSubTab === 'flow' }"
							@click="switchSubTab('flow')">
							流水排行
						</button>
						<button class="sub-tab" :class="{ 'tab-active': activeSubTab === 'amount' }"
							@click="switchSubTab('amount')">
							金额排行
						</button>
					</view>

					<!-- 子选项卡内容 -->
					<view class="sub-content" v-if="activeSubTab === 'flow'">
						<!-- 表头 -->
						<view class="table-header">
							<view class="rank-col">排名</view>
							<view class="player-col">玩家</view>
							<view class="amount-col">累计流水</view>
						</view>

						<!-- 排行榜列表 -->
						<scroll-view class="ranking-list" scroll-y>
							<view class="rank-item"
								:class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : 'rank-other'"
								v-for="(player, index) in classicFlowRanking" :key="index">
								<view class="rank-num">{{ index + 1 }}</view>
								<view class="player-info">
									<image :src="player.avatar" class="avatar" :alt="player.name"></image>
									<view class="player-details">
										<text class="player-name">{{ player.name }}</text>
										<text class="player-level">{{ player.level }}</text>
									</view>
								</view>
								<view class="player-amount">{{ player.amount }}</view>
							</view>
						</scroll-view>
					</view>

					<view class="sub-content" v-if="activeSubTab === 'amount'">
						<!-- 表头 -->
						<view class="table-header">
							<view class="rank-col">排名</view>
							<view class="player-col">玩家</view>
							<view class="amount-col">累计金额</view>
						</view>

						<!-- 排行榜列表 -->
						<scroll-view class="ranking-list" scroll-y>
							<view class="rank-item"
								:class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : 'rank-other'"
								v-for="(player, index) in classicAmountRanking" :key="index">
								<view class="rank-num">{{ index + 1 }}</view>
								<view class="player-info">
									<image :src="player.avatar" class="avatar" :alt="player.name"></image>
									<view class="player-details">
										<text class="player-name">{{ player.name }}</text>
										<text class="player-level">{{ player.level }}</text>
									</view>
								</view>
								<view class="player-amount">{{ player.amount }}</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<!-- 盲盒对战内容 -->
				<view class="main-content" v-if="activeMainTab === 'battle'">
					<!-- 子选项卡导航 -->
					<view class="sub-tabs">
						<button class="sub-tab" :class="{ 'tab-active': activeSubTab === 'flow' }"
							@click="switchSubTab('flow')">
							流水排行
						</button>
						<button class="sub-tab" :class="{ 'tab-active': activeSubTab === 'amount' }"
							@click="switchSubTab('amount')">
							金额排行
						</button>
					</view>

					<!-- 子选项卡内容 -->
					<view class="sub-content" v-if="activeSubTab === 'flow'">
						<!-- 表头 -->
						<view class="table-header">
							<view class="rank-col">排名</view>
							<view class="player-col">玩家</view>
							<view class="amount-col">对战流水</view>
						</view>

						<!-- 排行榜列表 -->
						<scroll-view class="ranking-list" scroll-y>
							<view class="rank-item"
								:class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : 'rank-other'"
								v-for="(player, index) in battleFlowRanking" :key="index">
								<view class="rank-num">{{ index + 1 }}</view>
								<view class="player-info">
									<image :src="player.avatar" class="avatar" :alt="player.name"></image>
									<view class="player-details">
										<text class="player-name">{{ player.name }}</text>
										<text class="player-level">{{ player.level }}</text>
									</view>
								</view>
								<view class="player-amount">{{ player.amount }}</view>
							</view>
						</scroll-view>
					</view>

					<view class="sub-content" v-if="activeSubTab === 'amount'">
						<!-- 表头 -->
						<view class="table-header">
							<view class="rank-col">排名</view>
							<view class="player-col">玩家</view>
							<view class="amount-col">对战金额</view>
						</view>

						<!-- 排行榜列表 -->
						<scroll-view class="ranking-list" scroll-y>
							<view class="rank-item"
								:class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : 'rank-other'"
								v-for="(player, index) in battleAmountRanking" :key="index">
								<view class="rank-num">{{ index + 1 }}</view>
								<view class="player-info">
									<image :src="player.avatar" class="avatar" :alt="player.name"></image>
									<view class="player-details">
										<text class="player-name">{{ player.name }}</text>
										<text class="player-level">{{ player.level }}</text>
									</view>
								</view>
								<view class="player-amount">{{ player.amount }}</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<!-- 幸运饰品内容 -->
				<view class="main-content" v-if="activeMainTab === 'lucky'">
					<!-- 子选项卡导航 -->
					<view class="sub-tabs">
						<button class="sub-tab" :class="{ 'tab-active': activeSubTab === 'flow' }"
							@click="switchSubTab('flow')">
							流水排行
						</button>
						<button class="sub-tab" :class="{ 'tab-active': activeSubTab === 'amount' }"
							@click="switchSubTab('amount')">
							金额排行
						</button>
					</view>

					<!-- 子选项卡内容 -->
					<view class="sub-content" v-if="activeSubTab === 'flow'">
						<!-- 表头 -->
						<view class="table-header">
							<view class="rank-col">排名</view>
							<view class="player-col">玩家</view>
							<view class="amount-col">饰品流水</view>
						</view>

						<!-- 排行榜列表 -->
						<scroll-view class="ranking-list" scroll-y>
							<view class="rank-item"
								:class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : 'rank-other'"
								v-for="(player, index) in luckyFlowRanking" :key="index">
								<view class="rank-num">{{ index + 1 }}</view>
								<view class="player-info">
									<image :src="player.avatar" class="avatar" :alt="player.name"></image>
									<view class="player-details">
										<text class="player-name">{{ player.name }}</text>
										<text class="player-level">{{ player.level }}</text>
									</view>
								</view>
								<view class="player-amount">{{ player.amount }}</view>
							</view>
						</scroll-view>
					</view>

					<view class="sub-content" v-if="activeSubTab === 'amount'">
						<!-- 表头 -->
						<view class="table-header">
							<view class="rank-col">排名</view>
							<view class="player-col">玩家</view>
							<view class="amount-col">饰品价值</view>
						</view>

						<!-- 排行榜列表 -->
						<scroll-view class="ranking-list" scroll-y>
							<view class="rank-item"
								:class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : 'rank-other'"
								v-for="(player, index) in luckyAmountRanking" :key="index">
								<view class="rank-num">{{ index + 1 }}</view>
								<view class="player-info">
									<image :src="player.avatar" class="avatar" :alt="player.name"></image>
									<view class="player-details">
										<text class="player-name">{{ player.name }}</text>
										<text class="player-level">{{ player.level }}</text>
									</view>
								</view>
								<view class="player-amount">{{ player.amount }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>

			<!-- 弹窗底部 -->
			<view class="popup-footer">
				<text class="footer-text">数据每小时更新一次 | 排行榜仅显示前100名玩家</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CSGORankingPopup',
		// 组件属性：控制显示/隐藏
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			// 允许外部传入背景图
			backgroundImage: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				// 选项卡状态
				activeMainTab: 'classic',
				activeSubTab: 'flow',
				// 动画状态
				animateEnter: false,

				// 排行榜数据 - 经典盲盒
				classicFlowRanking: [{
						name: 'DragonSlayer',
						avatar: 'https://picsum.photos/id/1/50/50',
						level: '精英会员',
						amount: '¥128,500'
					},
					{
						name: 'AKMaster',
						avatar: 'https://picsum.photos/id/2/50/50',
						level: '高级会员',
						amount: '¥95,300'
					},
					{
						name: 'AWPPro',
						avatar: 'https://picsum.photos/id/3/50/50',
						level: '高级会员',
						amount: '¥76,800'
					},
					{
						name: 'CSExpert',
						avatar: 'https://picsum.photos/id/4/50/50',
						level: '普通会员',
						amount: '¥62,400'
					}
				],
				classicAmountRanking: [{
						name: 'KnifeCollector',
						avatar: 'https://picsum.photos/id/11/50/50',
						level: 'VIP会员',
						amount: '¥52,800'
					},
					{
						name: 'SniperGod',
						avatar: 'https://picsum.photos/id/12/50/50',
						level: '精英会员',
						amount: '¥41,300'
					},
					{
						name: 'BombExpert',
						avatar: 'https://picsum.photos/id/13/50/50',
						level: '高级会员',
						amount: '¥36,700'
					}
				],

				// 排行榜数据 - 盲盒对战
				battleFlowRanking: [{
						name: 'BattleKing',
						avatar: 'https://picsum.photos/id/21/50/50',
						level: 'VIP会员',
						amount: '¥89,200'
					},
					{
						name: 'DuelMaster',
						avatar: 'https://picsum.photos/id/22/50/50',
						level: '精英会员',
						amount: '¥75,600'
					}
				],
				battleAmountRanking: [{
						name: 'WagerMaster',
						avatar: 'https://picsum.photos/id/31/50/50',
						level: 'VIP会员',
						amount: '¥36,800'
					},
					{
						name: 'RiskTaker',
						avatar: 'https://picsum.photos/id/32/50/50',
						level: '精英会员',
						amount: '¥29,500'
					}
				],

				// 排行榜数据 - 幸运饰品
				luckyFlowRanking: [{
						name: 'LuckyGuy',
						avatar: 'https://picsum.photos/id/41/50/50',
						level: 'VIP会员',
						amount: '¥102,500'
					},
					{
						name: 'CharmCollector',
						avatar: 'https://picsum.photos/id/42/50/50',
						level: '高级会员',
						amount: '¥88,300'
					}
				],
				luckyAmountRanking: [{
						name: 'TreasureHunter',
						avatar: 'https://picsum.photos/id/51/50/50',
						level: 'VIP会员',
						amount: '¥68,900'
					},
					{
						name: 'RareFinder',
						avatar: 'https://picsum.photos/id/52/50/50',
						level: '精英会员',
						amount: '¥54,200'
					}
				]
			};
		},
		watch: {
			// 监听显示状态变化，触发动画
			visible(newVal) {
				if (newVal) {
					// 显示时触发进入动画
					this.$nextTick(() => {
						this.animateEnter = true;
					});
				} else {
					// 隐藏时重置动画状态
					this.animateEnter = false;
				}
			}
		},
		methods: {
			// 获取排名样式类
			getRankClass(index) {
				if (index === 0) return 'rank-1';
				if (index === 1) return 'rank-2';
				if (index === 2) return 'rank-3';
				return 'rank-other';
			},

			// 切换主选项卡
			switchMainTab(tab) {
				this.activeMainTab = tab;
				this.activeSubTab = 'flow'; // 切换主选项卡时默认显示流水排行
			},

			// 切换子选项卡
			switchSubTab(tab) {
				this.activeSubTab = tab;
			},

			// 处理关闭逻辑
			handleClose() {
				// 先触发离开动画
				this.animateEnter = false;
				// 动画结束后通知父组件关闭
				setTimeout(() => {
					this.$emit('update:visible', false);
					this.$emit('close');
				}, 300);
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 弹窗容器 - 覆盖整个屏幕 */
	.popup-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		/* 确保在最上层 */
		pointer-events: auto;
	}

	/* 背景遮罩 */
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	/* 遮罩进入动画 */
	.overlay-enter {
		opacity: 1;
	}

	/* 弹窗样式 */
	.popup {
		width: 90%;
		max-width: 600px;
		background-color: #0A0F1C;
		border-radius: 12px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
		transform: scale(0.9);
		opacity: 0;
		transition: all 0.3s ease;
		max-height: 90vh;
		/* 限制最大高度，避免超出屏幕 */
		display: flex;
		flex-direction: column;
	}

	/* 弹窗进入动画 */
	.popup-enter {
		transform: scale(1);
		opacity: 1;
	}

	/* 弹窗头部 */
	.popup-header {
		background-color: #0F172A;
		padding: 16px 24px;
		display: flex;
		justify-content: center;
		/* 标题居中 */
		align-items: center;
		border-bottom: 1px solid #1E293B;
		position: relative;
	}

	.header-title {
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.close-btn {
		position: absolute;
		right: 24px;
		top: 50%;
		transform: translateY(-50%);
		background: none;
		border: none;
		color: #888;
		font-size: 20px;
		padding: 4px;
	}

	.close-btn:hover {
		color: #fff;
	}

	/* 主选项卡 */
	.main-tabs {
		background-color: #0F172A;
		border-bottom: 1px solid #1E293B;
	}

	.tabs-container {
		display: flex;
		justify-content: center;
		overflow-x: auto;
	}

	.main-tab {
		padding: 16px 24px;
		background: none;
		border: none;
		color: #888;
		font-size: 16px;
		font-weight: 500;
		white-space: nowrap;
	}

	.main-tab.tab-active {
		color: #165DFF;
		border-bottom: 2px solid #165DFF;
	}

	.main-tab:hover {
		color: #fff;
	}

	/* 内容区域 - 可滚动 */
	.content-area {
		padding: 24px;
		flex: 1;
		overflow: hidden;
	}

	/* 子选项卡 */
	.sub-tabs {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		border-bottom: 1px solid #1E293B;
	}

	.sub-tab {
		padding: 8px 16px;
		background: none;
		border: none;
		color: #888;
		font-size: 14px;
		font-weight: 500;
	}

	.sub-tab.tab-active {
		color: #165DFF;
		border-bottom: 2px solid #165DFF;
	}

	.sub-tab:hover {
		color: #fff;
	}

	/* 表头样式 */
	.table-header {
		display: flex;
		padding: 8px 0;
		margin-bottom: 12px;
		color: #888;
		font-size: 14px;
		font-weight: 500;
	}

	.rank-col {
		width: 16.67%;
		/* 1/6 */
	}

	.player-col {
		width: 50%;
		/* 3/6 */
	}

	.amount-col {
		width: 33.33%;
		/* 2/6 */
		text-align: right;
	}

	/* 排行榜列表 */
	.ranking-list {
		height: 400px;
	}

	.rank-item {
		display: flex;
		align-items: center;
		padding: 12px;
		border-radius: 8px;
		margin-bottom: 8px;
		transition: transform 0.2s;
	}

	.rank-item:hover {
		transform: scale(1.01);
	}

	/* 排名样式 */
	.rank-1 {
		background: linear-gradient(90deg, rgba(255, 183, 77, 0.2), rgba(255, 215, 0, 0.1));
		border: 1px solid rgba(255, 183, 77, 0.3);
	}

	.rank-2 {
		background: linear-gradient(90deg, rgba(200, 200, 200, 0.2), rgba(220, 220, 220, 0.1));
		border: 1px solid rgba(200, 200, 200, 0.3);
	}

	.rank-3 {
		background: linear-gradient(90deg, rgba(205, 127, 50, 0.2), rgba(218, 165, 32, 0.1));
		border: 1px solid rgba(205, 127, 50, 0.3);
	}

	.rank-other {
		background-color: rgba(30, 41, 59, 0.5);
		border: 1px solid rgba(30, 41, 59, 0.8);
	}

	.rank-num {
		width: 16.67%;
		display: flex;
		justify-content: center;
	}

	.rank-num::before {
		content: '';
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		font-weight: bold;
	}

	.rank-1 .rank-num::before {
		background-color: #FFD700;
		color: #0A0F1C;
		content: '1';
	}

	.rank-2 .rank-num::before {
		background-color: #C0C0C0;
		color: #0A0F1C;
		content: '2';
	}

	.rank-3 .rank-num::before {
		background-color: #CD7F32;
		color: #fff;
		content: '3';
	}

	.rank-other .rank-num::before {
		background-color: #1E293B;
		color: #ccc;
		content: attr(data-rank);
	}

	/* 玩家信息 */
	.player-info {
		width: 50%;
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		margin-right: 12px;
	}

	.player-details {
		display: flex;
		flex-direction: column;
	}

	.player-name {
		color: #fff;
		font-weight: 500;
		font-size: 15px;
	}

	.player-level {
		color: #888;
		font-size: 12px;
	}

	/* 金额样式 */
	.player-amount {
		width: 33.33%;
		text-align: right;
		font-weight: 500;
	}

	.rank-1 .player-amount {
		color: #FFD700;
	}

	.rank-2 .player-amount {
		color: #C0C0C0;
	}

	.rank-3 .player-amount {
		color: #CD7F32;
	}

	.rank-other .player-amount {
		color: #ddd;
	}

	/* 弹窗底部 */
	.popup-footer {
		background-color: #0F172A;
		padding: 12px 24px;
		border-top: 1px solid #1E293B;
		text-align: center;
	}

	.footer-text {
		color: #888;
		font-size: 12px;
	}

	/* 自定义颜色变量 */
	.text-gold {
		color: #FFD700;
	}

	/* 滚动条样式 */
	::-webkit-scrollbar {
		width: 4px;
	}

	::-webkit-scrollbar-thumb {
		background-color: #333;
		border-radius: 2px;
	}
</style>